<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>局部指令</title>
</head>
<body>
<div id="app">
    <input v-focus v-color="msg">
</div>

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            msg: {
                color: "blue"
            }
        },
        //局部指令
        directives: {
            focus: {
                // 指令的定义
                inserted: function (el) {
                    el.focus()
                }
            },
            color: {
                bind: function (el, binding) {
                    el.style.backgroundColor = binding.value.color;
                }
            }
        }
    })
</script>
</body>
</html>
